---
title: 'Back to Basic: UI Design Fundamental'
publishedAt: '2021-02-04'
description: '7 fundamental that you can really use to make your design better'
banner: 'marek-okon-WScpndZFrOM-unsplash_trqbmo'
tags: 'design'
---

## Introduction

> According to Gary Simon, there are 7 UI Design Fundamental that has to be met

These 7 fundamentals were heavily inspired by [Design Course - The 2020 UI Design Fundamentals Crash Course](https://www.youtube.com/watch?v=tRpoI6vkqLs)

The 7 UI Design Fundamentals are:

1. Whitespace
2. Alignment
3. Contrast
4. Scale
5. Typography
6. Color
7. Visual Hierarchy

I will give you some ilustrations to elaborate on,

## 1. White Space

By having enough whitespace, our design will not be crowded. We need to give enough breathing room to our design.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/btb-ui-fundamental/1_tm864u.jpg'
  alt='Ilustrasi Whitespace'
  width={953}
  height={545}
/>

Give enough padding and margin to your design, also make sure that you give consistent number on them.

## 2. Alignment

Alignment means that your design aligns perfectly. By using this fundamental, your design will look more neat and natural.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/btb-ui-fundamental/2_fp6ayr.jpg'
  alt='Ilustrasi Alignment'
  width={953}
  height={545}
/>

Usually, when developing, we can add a container to give constrained space by using `max-width`

Example:

```html
<section>
  <div class="container"></div>
</section>

<style>
    .container {
      <!-- Width can also changed with padding -->
      width: 90%;

      max-width: 50rem;
      margin-left: auto;
      margin-right: auto;
    }

  .section {
    <!-- you can add background color here -->
  }
</style>
```

## 3. Contrast

Contrast is the color difference between text and the background. You need to have enough contrast so it will be easier to read. Contrast needs to meet WCAG 2.0 rules, you can use [this tool](https://contrastchecker.com/) to check the WCAG. There is also a figma extension which is [A11y - color contrast checker](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwj97tzEzM_uAhUIfSsKHSGLCE8QFjAAegQIAhAC&url=https%3A%2F%2Fwww.figma.com%2Fcommunity%2Fplugin%2F733159460536249875&usg=AOvVaw0QYyNcsQnWIqfZevLmZSvf).

> Fun fact: A11y stands for Accessibility, 11 was taken from letters between A and y.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/btb-ui-fundamental/3_vrqocr.jpg'
  alt='Ilustrasi Contrast'
  width={953}
  height={545}
/>

## 4. Scale

Scale is the font-size that you use. Choose a font-size that is not too big and not too small. The default is `16px`. **Contrast** and **Scale** plays a big role in WCAG 2.0 rules.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/btb-ui-fundamental/4_bqcx66.jpg'
  alt='Ilustrasi Scale'
  width={953}
  height={545}
/>

> Don't make them squint

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/btb-ui-fundamental/squint_ig4wm3.gif'
  alt='Squint'
  width={370}
  height={272}
/>

## 5. Typography

Typography is the font-family that we choose. Don't use too much font, usually, I only use 1 or 2 fonts. Use fonts that can complement each other

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/btb-ui-fundamental/5_urgogw.jpg'
  alt='Ilustrasi Typography'
  width={953}
  height={545}
/>

> Pro tip: Don't use comic sans ;)

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/btb-ui-fundamental/6_woi3j8.jpg'
  alt='Comic Sans'
  width={400}
  height={400}
/>

## 6. Color

The color you choose for your website will affect the design looks. Don't use too much color. There are some design system that recommends using 3 colors which are primary, secondary, and accent color.

You can also use a website that gives you color recommendation like [mycolor.space](https://mycolor.space/) and [coolors](https://coolors.co)

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/btb-ui-fundamental/7_zkafqr.jpg'
  alt='Ilustrasi Color'
  width={953}
  height={545}
/>

## 7. Visual Hierarchy

Visual Hierarchy is very important to direct the eye of the user to the flow of the website that you want to make. Give a bigger font-size if you want them to see it first.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/btb-ui-fundamental/9_upyluo.jpg'
  alt='Ilustrasi Visual Hierarchy'
  width={953}
  height={545}
/>

User of a website didn't really read, they skim.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/btb-ui-fundamental/8_uap6ow.jpg'
  alt='Ilustrasi VS'
  width={400}
  height={400}
/>

## Summary

There it is the 7 UI Design Fundamental, hopefully, this blog can make your design improve!
